<template>
  <div>
    <!-- 顶部图片分类 -->
    <van-tabs v-model="activeCate" @click="getImgList(cateID)">
      <van-tab v-for="(item,index1) in imgCateList" :key="index1" :title="item.title">
        <!-- 图片列表 -->
        <van-list>
          <van-cell v-for="(subItem, index2) in imgList" :key="index2">
            <div class="detail" @click="getImgInfo(subItem.id)">
              <!-- 文字介绍层 -->
              <div class="desc">
                <p v-text="subItem.seo_title"></p>
                <span v-text="subItem.seo_description"></span>
              </div>
              <!-- 图片 -->
              <img :src="subItem.img_url" v-lazy="subItem.img_url">
            </div>
          </van-cell>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  name: 'List',
  data () {
    return {
      // 图片分类数据
      imgCateList: [],
      // 当前激活的标签索引
      activeCate: 0,
      // 当前分类下的图片列表
      imgList: []
    }
  },
  created () {
    this.getimgCateList()
    // 获取全部图片列表
    this.getImgList(0)
  },
  computed: {
    // 当前激活的图片分类id
    cateID () {
      return this.imgCateList[this.activeCate].id
    }
  },
  methods: {
    // 获取图片分类列表
    async getimgCateList () {
      // 加载提示
      Toast.loading({ message: '加载中...', forbidClick: true })
      const { data: res } = await this.$http.get('api/getimgcategory')
      this.imgCateList = res.message
      this.imgCateList.unshift({ title: '全部', id: 0 })
    },

    // 根据图片分类id获取图片列表
    async getImgList (id) {
      const { data: res } = await this.$http.get(`api/getimages/${id}`)
      console.log(id)
      this.imgList = res.message
      console.log(res.message)
    },

    // 跳转到图片详情页
    async getImgInfo (id) {
      this.$router.push(`info/${id}`)
    }
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.detail {
  position: relative;
  // 文字描述
  .desc {
    width: 100%;
    height: 30%;
    padding: 0 10px;
    position: absolute;
    bottom: 0;
    line-height: 20px;
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, .5);
    box-sizing: border-box;
    p {
      margin: 3px 0;
    }
  }
  // 图片
  img {
  width: 100%;
  }
}
</style>
